<template>
  <div class="main">
    <span class="a1">
      <el-table
        ref="tableRef"
        :data="uslist"
        style="width: 100%; border-radius: 10rem; height: 220rem"
      >
        <el-table-column prop="username" label="用户名" sortable />
        <el-table-column prop="usertype" label="类型" />
        <el-table-column
          prop="userstate"
          label="状态"
          :filters="[
            { text: 'Active', value: 'Active' },
            { text: 'Locked', value: 'Locked' },
            { text: 'Suspended', value: 'Suspended' },
          ]"
          :filter-method="filterTag"
          filter-placement="bottom-end"
        >
          <template #default="scope">
            <el-tag
              :type="scope.row.userstate === 'Active' ? 'success' : 'warning'"
              disable-transitions
              >{{ scope.row.userstate }}</el-tag
            >
          </template>
        </el-table-column>
      </el-table>
    </span>

    <span class="a2" style="overflow: hidden">
      <div
        ref="pieChart"
        style="width: 100%; border-radius: 10rem; background-color: white; height: 300rem"
      ></div>
    </span>
  </div>
</template>
    
  <script setup>
import { ref } from 'vue'
import * as echarts from 'echarts'
import axios from '@/utils/api'

const uslist = ref([])
let ActiveType = ref([])
let LockedType = ref([])
let SuspendedType = ref([])
// 请求用户信息列表
const userlist = () => {
  return axios.post('http://localhost:3000/login/userlist')
}
// 使用 ref 引用 DOM 元素
const pieChart = ref(null)

userlist().then((res) => {
  uslist.value = res.data.userAll
  ActiveType = uslist.value.filter((user) => user.userstate === 'Active')
  LockedType = uslist.value.filter((user) => user.userstate === 'Locked')
  SuspendedType = uslist.value.filter((user) => user.userstate === 'Suspended')

  if (pieChart.value) {
    const myChart = echarts.init(pieChart.value)
    // 绘制图表
    myChart.setOption({
      tooltip: {
        trigger: 'item',
      },
      legend: {
        top: '5%',
        left: 'center',
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: ['40%', '70%'],
          center: ['50%', '70%'],
          // adjust the start and end angle
          startAngle: 180,
          endAngle: 360,
          data: [
            { value: ActiveType.length, name: 'Active' },
            { value: LockedType.length, name: 'Locked' },
            { value: SuspendedType.length, name: 'Suspended' },
          ],
          itemStyle: {
            // 设置每个柱子的颜色
            color: (params) => {
              const colors = ['#43d834', '#fa4566', '#e5a42b'] // 可以根据数据项的不同设置不同的颜色
              return colors[params.dataIndex] // 根据数据项索引选择颜色
            },
          },
        },
      ],
    })
  }
})

const filterTag = (value, row) => {
  return row.userstate === value
}
</script>
  <style scoped lang="less">
.main {
  display: flex;
  justify-content: space-between;
  padding: 20rem;
  .a1,
  .a2 {
    width: 49%;
    height: 220rem;
  }
}
</style>
    